<template>
  <div>
    <div class="option">
      <el-form :inline="true" ref="option" :model="options">
        <el-form-item label="选择时间">
          <el-date-picker
            @change="selectTimeRange"
            @keyup.enter.native="query"
            v-model="dataRange"
            type="daterange"
            size="mini"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="query">
            <i class="el-icon-search"></i> 查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="cont">
      <fieldset class="mv10" style="width: calc((100% - 120px) / 3); padding: 15px 20px;">
        <legend>闭环最长/最短时长统计</legend>
        <div class="flex">
          <div>
            <output><span class="num">{{toFix(dataNumber['min'])}}</span>min</output>
            <label>闭环最短时长</label>
          </div>
          <div>
            <output><span class="num">{{toFix(dataNumber['max'])}}</span>min</output>
            <label>闭环最长时长</label>
          </div>
          <div>
            <output><span class="num">{{toFix(dataNumber['avg'])}}</span>min</output>
            <label>闭环平均时长</label>
          </div>
        </div>
      </fieldset>
      <fieldset class="mv10" style="flex:1;">
        <legend>事件检出数统计</legend>
        <div class="h160">
          <VBarChart :data="barData" :cfg="vBarChartCfg"></VBarChart>
        </div>
      </fieldset>

    </div>
    <div class="cont">
      <fieldset class="mv10" style="flex:1;">
        <legend>事件检出数统计</legend>
        <div class="box">
            <div class="item" v-for="item in timeData">
              <div class="name" :style="{color:colors[item.type]}">
                <span :class="icons[item.type]" class="iconfont"></span>
                {{name(item.name)}}
              </div>
              <div class="itm" v-for="(v,k) in item.list">
<!--                <span class="value"><span class="num">{{k==='jhTime'?(Math.random()*5/60).toFixed(2):v}}</span>min</span>-->
                <span class="value"><span class="num">{{parseFloat(v)}}</span>{{v.replace(/[0-9]/gi, '').replace(/\./g,'')}}</span>
                <span class="name">{{name2(k)}}</span>
              </div>
            </div>
        </div>
      </fieldset>

    </div>
  </div>
</template>

<script>
  import moment from 'moment';

  import VBarChart from 'kkui/echarts/VBarChart';

  export default {
    name: "Event",
    components: {
      VBarChart
    },
    data() {
      return {
        dataRange: '',
        options: {
          startTime: '',
          endTime: '',
        },
        timeSelect: 0,
        dict: this.$kkui.cache.get('dict'),
        countData: [],
        countName: ['稽核平均时长', '发布平均时长', '处置平均时长', '完成平均时长'],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },


        dataNumber: {},
        vBarChartCfg:{
          barWidth: 30,
          axisColor:'#333',
          fontWeight:400,
          rotate:40
        },
        barData:{},
        timeData:[],
        icons:WebCfg.icons,
        colors:WebCfg.eventColor
      }
    },
    mounted() {
      this.init();
    },
    computed: {
      name: function () {
        return (name) => {
          return name.indexOf('-') > -1 ? name.split('-')[1] : name
        }
      },
      name2: function () {
        return (n) => {
         let name='';
         switch (n) {
           case 'jhTime':
             name='预警平均时长';
             break;
           case 'fbTime':
             name='调度平均时长';
             break;
           case 'czTime':
             name='处置平均时长';
             break;
           case 'wcTime':
             name='闭环平均时长';
             break;
         }
         return name;
        }
      },
    },
    methods: {
      init() {
        this.query();
      },

      query() {
        const param = {...this.options};
        if(!param.startTime){
          param.endTime=moment(new Date()).format('YYYY-MM-DD');
        }
        if (!param.startTime || new Date(param.startTime).getTime()<new Date('2023-05-01').getTime()) {
          param.startTime = '2023-05-01';
        }

        this.$server('count.queryEvent', param).then(data => {
          this.dataNumber = data.number[0];
          this.barData={
            name:data.event.map(item=>{
              let name=item.value;
              return name.indexOf('-')>-1?name.split('-')[1]:name;
            }),
            value:data.event.map(item=>item.eventCount)
          };
          this.timeData=data.time;
        });

      },
      selectTimeRange() {
        if (this.dataRange) {
          this.options.startTime = this.dataRange ? moment(this.dataRange[0]).format('YYYY-MM-DD') : '';
          this.options.endTime = this.dataRange ? moment(this.dataRange[1]).format('YYYY-MM-DD') : '';
        }else{
          this.options.startTime = '';
          this.options.endTime =  '';
        }
      },
      setTime(v) {
        this.timeSelect = v;
      },
      toFix(num) {
        num = num ? (num*1).toFixed(1) : 0;
        return num;
      }
    }
  }
</script>

<style scoped lang="scss">
  fieldset {
    padding: 15px;
    border: 1px solid #aaa;
    background-color: rgba(0, 0, 0, .05);

    legend {
      font-size: 16px;
    }
    .flex{
      justify-content: space-between;
      >div{
        color:#ddd;
        border-radius: 5px;
        padding: 10px 20px;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        align-items: center;

        &:nth-child(1){
          background-color: var(--font-blue-color);
        }
        &:nth-child(2){
          background-color:#FF4D4D;
        }
        &:nth-child(3){
          background-color: #00B259;
        }
        .num{
          font-size: 26px;
          color: #fff;
        }
      }
    }

    .h160{
      height: 160px;
      display: flex;
      gap: 20px;





    }
  }

  .cont {
    display: flex;
    justify-content: space-between;
    gap:20px;
    padding: 0 20px;
    .box{
      display: flex;
      flex-wrap: wrap;

      .item {
        width: calc((100% - 30px) / 3);
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        padding: 10px;
        box-sizing: border-box;
        margin: 5px;
        background-color: #fff;
        gap: 10px;
        position: relative;
        border-radius: 5px;
        &:nth-child(odd){
          background-color: rgba(0,125,255,.05);
        }
        /*.bg{*/
        /*  position: absolute;*/
        /*  width: 100%;*/
        /*  height: 100%;*/
        /*  left:0;*/
        /*  top:0;*/
        /*  opacity: .2;*/
        /*}*/
        > .name {
          width: 100px;
          text-align: center;
        }

        > .itm {
          flex: 1;
          display: flex;
          flex-direction: column;
          .value{
            font-size: 12px;
          }
          .num {
            font-size: 20px;
          }

          .name {
            font-size: 13px;
            opacity: .3;
            margin-top: 5px;
          }
        }
      }
    }
  }
</style>
